<template>
  <el-container >
    <div class="panelCon">
      <div class="tips" v-if="obj.channelIndex == 1">
        请将公众平台模板消息所在行业选择为： <span style="color:#ff9900;font-weight:700">IT科技/互联网|电子商务 其他|其他</span>，所选行业不一致将会导致模板消息不可用<br/>
        微信公众平台模板消息最多支持可添加25条
      </div>
      <div class="tips" v-else-if="obj.channelIndex == 2">
        请到微信小程序管理后台服务类目中添加 【商家自营】-【内衣】
      </div>
      <div class="title" :style="obj.channelIndex == 3 ? 'margin-top:0;' : ''">发送设置</div>
      <div class="edit_con">
        <div class="edit_content">
          <el-form size="medium" label-width="100px" class="edit_form">
            <el-form-item label="发送设置">
              <el-radio-group v-model="obj.channelTemplate.status">
                <el-radio :label="1">开启</el-radio>
                <el-radio :label="0">关闭</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="发送时间" style="color:#606266;">{{obj.channelTemplate.timing}}</el-form-item>
            <el-form-item label="发送用户" v-if="obj.type=='卖家通知'" style="color:#606266;">
            <el-input style="width: 300px;" v-model="obj.channelTemplate.user_id" placeholder="请输入发送用户id"></el-input>

            </el-form-item>
            <el-form-item label="模板设置">
              <el-radio-group v-model="obj.channelTemplate.is_base">
                <el-radio :label="1" v-if="obj.channelType.indexOf(1) > -1">系统默认</el-radio>
                <el-radio :label="0" v-if="obj.channelType.indexOf(2) > -1">自定义模板</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item>
              <div class="templateDemo">
                <div v-if="obj.channelTemplate.is_base == 1" class="pic_area" :style="{backgroundImage:'url(' + require('@/assets/images/notice_Default_bg.jpg') + ')'}">
                  <div class="wxd" v-if="obj.channelIndex == 1">
                    <div class="template-title">{{obj.channelDefault.first}}</div>
                    <div class="template-html">
                      <div class="flex" v-for="(value,key,i) in obj.channelDefault.attr" :key="i">
                        <div class="label">{{key}}：</div>
                        <div class="txt">{{value}}</div>
                      </div>
                      <div class="flex">
                        <div class="label">备注：</div>
                        <div class="txt">{{obj.channelDefault.remark}}</div>
                      </div>

                    </div>
                  </div>
                  <div class="mpd" v-else-if="obj.channelIndex == 2">
                    <div class="title flex">
                      <div class="logo flex">
                        <div class="logo-icon">商城</div>
                        <div>商城</div>
                      </div>
                      <div class="dot">
                        <span></span>
                        <span></span>
                        <span></span>
                      </div>
                    </div>
                    <div class="content">
                      <div class="template-title">{{obj.channelDefault.title}}</div>
                      <div class="template-html">
                        <div class="flex" v-for="(value,key,i) in obj.channelDefault.attr" :key="i">
                          <div class="label">{{key}}</div>
                          <div>{{value}}</div>
                        </div>
                      </div>
                    </div>
                    <div class="template-link">拒收通知</div>
                  </div>
                  <div class="smsd" v-else-if="obj.channelIndex == 3">
                    <div class="sms-notice">
                      <img src="" alt="" class="sms-icon-img">
                      <div class="message-content">{{obj.channelDefault.data}}</div>
                    </div>
                  </div>
                </div>
                <div v-if="obj.channelTemplate.is_base == 0">
                  <el-select v-model="obj.channelTemplate.template_id" placeholder="请选择" style="width:250px">
                    <el-option
                      v-for="item in tl"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                  <el-button type="text" style="margin-left:10px;" @click="refresh">刷新</el-button>

                  <router-link v-if="obj.channelIndex == 1" tag="a" target="_blank" to="/notice/wx/wxItem" style="margin-left:10px">
                    <el-button type="text">添加模板</el-button>
                  </router-link>

                   <router-link v-if="obj.channelIndex == 3" tag="a" target="_blank" to="/notice/sms/smsItem" style="margin-left:10px">
                    <el-button type="text">添加模板</el-button>
                  </router-link>
                </div>
              </div>
            </el-form-item>

          </el-form>
        </div>

        <div class="edit_footer">
          <el-button v-has size="medium" type="primary" @click="saveData">保存数据</el-button>
        </div>
      </div>
    </div>
  </el-container>
</template>

<script>
import {
  addNoticeConfig,
  editNoticeConfig
} from '@/api/mall/notice';
import {
  getTemplateWxAll,
  getTemplateAll
} from '@/api/mall/sms';
export default {
  name: 'noticeSetting',
  data(){
    return {
      tl:[],
      isLoading:false
    }
  },
  props:{
    obj:{
      type:Object,
      default:function(){
        return {};
      }
    },
    scene:{
      type:String,
      default:''
    },
    redirect:{
      type:String,
      default:''
    }
  },
  components: {},
  created(){},
  mounted(){
    switch(this.obj.channelIndex){
      case 1:
        //微信模板消息
        this.getWxTemplAll();
        break;
      case 2:
        //微信小程序订阅消息
        //empty
        break;
      case 3:
        //短信通知
        this.getTemplAll();
        break
      default:
        //empty
        break;
    };
  },
  computed:{},
  methods: {
    //刷新模板列表
    refresh(){
      switch(this.obj.channelIndex){
        case 1:
          //微信模板消息
          this.getWxTemplAll();
          break;
        case 2:
          //微信小程序订阅消息
          //empty
          break;
        case 3:
          //短信通知
          this.getTemplAll();
          break
        default:
          //empty
          break;
      };
    },
    //获取微信公众号消息模板列表
    getWxTemplAll(){
      this.isLoading = true;
      getTemplateWxAll(this.scene).then(res => {
        this.isLoading = false;
        this.tl = res.msg;
      }).catch(e => {
        this.isLoading = false;
      });
    },
    //获取短信消息模板列表
    getTemplAll(){
      this.isLoading = true;
      getTemplateAll('ali',this.scene).then(res => {
        this.isLoading = false;
        this.tl = res.msg;
      }).catch(e => {
        this.isLoading = false;
      });
    },
    //保存数据(新增/更新)
    saveData() {
      this.isLoading = true;
      if(this.obj.channelTemplate.id){
        //存在ID，更新
        editNoticeConfig(this.obj.channelTemplate).then(res => {
          this.isLoading = false;
          this.$router.push(this.redirect);
        }).catch(e => {
          this.isLoading = false;
        });
      }else{
        //不存在ID，新增
        addNoticeConfig(this.obj.channelTemplate).then(res => {
          this.isLoading = false;
          this.$router.push(this.redirect);
        }).catch(e => {
          this.isLoading = false;
        });
      };
    }
  }
}
</script>

<style lang="scss" scoped>
.panelCon{
  width: 100%;
  padding:5px 20px 20px;

  .tips{
    padding: 15px;
    color:#606266;
    font-size: 14px;
    line-height: 28px;
    border: 1px solid #abdcff;
    background-color: #f0faff;
  }

  .title{
    background:#e0e3e8;
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
    margin-top: 20px;
  }

  .edit_con{
    .edit_content{
      .edit_form{
        width: 100%;

        .templateDemo{
          width: 100%;
          padding: 20px;
          background: #F4F6F8;

          .pic_area{
            width: 250px;
            min-height: 410px;
            background-size: 250px 410px;
            background-position: top left;
            position: relative;
            padding: 70px 10px 0;

            .wxd{
              position: absolute;
              left: -30px;
              top: 50px;
              // position: relative;
              width: 310px;
              padding: 18px 16px;
              background-color: #fff;
              font-size: 15px;
              color: #212121;
              border: 1px solid #E5E5E5;
              border-radius: 5px;
              -webkit-transform: scale(0.7);
              transform: scale(0.7);

              .template-title{
                margin-bottom: 20px;
                line-height: 20px;
                font-size: 14px;
                color: #969696;
              }

              .template-html{
                line-height: 20px;
                font-size: 14px;
                width: 100%;
                word-break: break-all;

                .flex{
                  width: 100%;
                  display: flex;
                  height: 20px;
                  margin-bottom: 10px;

                  .label{
                    flex-shrink: 0;
                    width: 80px;
                    color: #969696;
                  }

                  .txt{
                    height: 20px;
                    flex-grow: 1;
                    line-height: 20px;
                    margin-bottom: 27px;
                  }
                }
              }
            }

            .mpd{
              position: absolute;
              left: -51px;
              top: 14px;
              padding-right: 6px;
              width: 351px;
              background-color: #fff;
              border: 1px solid #E5E5E5;
              border-radius: 5px;
              overflow: hidden;
              -webkit-transform: scale(0.66);
              transform: scale(0.66);

              .title.flex{
                display: flex;
                padding: 0 20px 0 18px;
                -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                justify-content: space-between;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                height: 54px;
                background-color: #fff;
                border-bottom: 1px solid #E5E5E5;

                .logo{
                  display: flex;
                  -webkit-box-align: center;
                  -ms-flex-align: center;
                  align-items: center;
                  font-weight: 700;
                  font-size: 13px;
                  line-height: 18px;
                  color: #1a1a1a;

                  .logo-icon{
                    margin-right: 4px;
                    width: 27px;
                    height: 27px;
                    line-height: 25px;
                    border: 1px solid #E7E7E7;
                    font-size: 9px;
                    color: #367BF5;
                    text-align: center;
                    border-radius: 50%;
                    font-weight: 500;
                    -webkit-transform: scale(0.8);
                    transform: scale(0.8);
                  }
                }

                .dot{
                  height: 27px;
                  line-height: 27px;

                  span{
                    display: inline-block;
                    margin-left: 3px;
                    width: 5px;
                    height: 5px;
                    background-color: #c7c7cb;
                    border-radius: 50%;
                  }
                }
              }

              .content{
                padding-left: 18px;

                .template-title{
                  margin: 16px 0 34px;
                  line-height: 24px;
                  font-size: 17px;
                }

                .template-html{
                  line-height: 20px;
                  font-size: 14px;
                  word-break: break-all;

                  .flex{
                    display: flex;
                    height: 20px;
                    margin-bottom: 10px;
                  }

                  .label{
                    width: 83px;
                    color: #969696;
                  }

                  div:last-child{
                    margin-bottom: 27px;
                  }
                }
              }

              .template-link{
                padding-left: 18px;
                height: 44px;
                line-height: 44px;
                font-size: 16px;
                cursor: default;
                border-top: 1px solid #e5e5e5;
              }
            }

            .smsd{
              min-height: 300px;
              background: #fff;

              .sms-notice{
                position: absolute;
                left: -22px;
                top: 86px;
                padding: 5px 12px;
                width: 274px;
                font-size: 15px;
                background-color: #E9E9EB;
                border-radius: 16px;
                -webkit-transform: scale(0.66);
                transform: scale(0.66);

                .sms-icon-img{
                  position: absolute;
                  left: -15px;
                  bottom: 2px;
                  width: 34px;
                  height: 41px;
                }

                .message-content{
                  position: relative;
                  line-height: 22px;
                }
              }

            }
          }
        }
      }
    }
  }
}
</style>
